<template>
    <div class="box">
        <div class="top">
            <input type="text" @keyup.enter="addList" v-model.trim="charu" placeholder="请输入要添加的内容"><el-button @click="addList">插入内容</el-button>
        </div>
        <div class="bottom">
            <div class="left">
                <ul>
                    <li v-for="item in Arrlist" :key="item.id">
                        <span>
                            {{ item.name }}
                        </span>
                        <el-button type="success" @click="leftList(item.id)">&gt;</el-button>
                        <el-button type="danger" @click="delList(item.id)">删除</el-button>
                    </li>
                </ul>
                <div class="wu" v-show="Arrlist.length === 0">
                    空空如也
                </div>
            </div>
            <div class="right">
                <ul>
                    <li v-for="item in Arrlist2" :key="item.id">
                        <span>{{ item.name }}</span>
                        <el-button type="success" @click="rightList(item.id)">&lt;</el-button>
                        <el-button type="danger" @click="delright(item.id)">删除</el-button>
                    </li>
                </ul>
                <div class="wu" v-show="Arrlist2.length === 0">
                    空空如也
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
    data () {
        return {
            charu:'',
            Arrlist:[
                {
                    id:nanoid(),
                    name:'第一个'
                },
                {
                    id:nanoid(),
                    name:'第二个'
                },{
                    id:nanoid(),
                    name:'第三个'
                },{
                    id:nanoid(),
                    name:'第四个'
                },
            ],
            Arrlist2:[],
        }
    },
    methods: {
        leftList(id){
           this.Arrlist2.push(this.Arrlist.find(item => item.id ==id ))
           this.Arrlist = this.Arrlist.filter(item => item.id !=id )
        },
        delList(id){
           this.Arrlist = this.Arrlist.filter(item => item.id != id)
        },
        delright(id){
           this.Arrlist2 = this.Arrlist2.filter(item => item.id != id)
        },
        rightList(id){
          this.Arrlist.push(this.Arrlist2.find(item => item.id == id))
          this.Arrlist2 = this.Arrlist2.filter(item => item.id != id)
        },
        addList(){
            console.log(this.charu);
            if (this.charu === '') {
                alert('请输入正确的内容')
                return
            }
            this.Arrlist.push({id:nanoid(),name:this.charu})
            this.charu = ''
        }
    },
}
</script>

<style scoped lang="scss">
    .box{
        width: 800px;
        height: 800px;
        border: 1px solid;
        margin: 0 auto;
        .top{
            width: 100%;
            text-align: center;
            border-bottom: 1px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            input{
                border: 1px solid;
            }  
        }
        .bottom{
            width: 100%;
            display: flex;
            justify-content: center;
            .left,.right{
                background-color: #ccc;
                border-right: 1px solid;
                width: 300px;
                border: 1px solid;
                min-height: 300px;
                ul>li{
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   border-bottom: 1px solid;
                   margin-top: 5px;
                   height: 50px;
                    span{
                        display: block;
                        margin-right: 20px;
                        border-radius: 5px;
                        background-color: #4a4a4a;
                        color: #fff;
                        box-sizing: border-box;
                        padding: 5px 10px;
                        
                    }
                }
            }
        }

    }
</style>


